<template>
  <el-row>
    <el-col :span="4">
        <el-button type="primary" :disabled="isButtonDisabled" @click="exportQuestion">导出题库</el-button>
    </el-col>
    <el-col :span="4">
        <el-button type="primary" :disabled="isButtonDisabled" @click="drawer2=true">生成试卷</el-button>
    </el-col>
    <!-- ...其他内容... -->
  </el-row>
  
  <!-- 使用 :style 动态绑定宽度 -->
  <el-drawer v-model="drawer2" :direction="direction" :size="drawerWidth">
    <template #header>
      <h2>试卷配置</h2>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelClick">取消</el-button>
        <el-button type="primary" @click="confirmClick">确认</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import type { DrawerProps } from 'element-plus'
import { defineProps } from 'vue'

const props = defineProps({
  isButtonDisabled: {
    type: Boolean,
    default: ''
  }
})

const drawer2 = ref(false)
const direction = ref<DrawerProps['direction']>('rtl')
// 用一个响应式变量控制抽屉的宽度
const drawerWidth = ref('800px')  // 你可以根据需要动态改变这个宽度，例如 '600px' 或 '50%'

const radio1 = ref('Option 1')
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure you want to close this?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}

function cancelClick() {
  drawer2.value = false
}

function confirmClick() {
  ElMessageBox.confirm(`Are you confirm to chose ${radio1.value} ?`)
    .then(() => {
      drawer2.value = false
    })
    .catch(() => {
      // catch error
    })
}

// 导出题库
async function exportQuestion() {
  
}
</script>
